<div class="account_treeview fl">
	<div class="account_treeview_scroll">
		<div class="account_treeview_buttonarea">
			<input type="text" class="form-control" id="searchAccount" value="" placeholder="搜索" />
			<i id="searchAccountButton"></i>
		</div>
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</div>
<script type="text/javascript">
    function findDimensions() {
        //获取窗口高度
        let winHeight;
        if (window.innerHeight)
		winHeight = window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))
		winHeight = document.body.clientHeight;
        $(".account_treeview_scroll").css("height",(winHeight-260)+"px");
    }
    findDimensions();
    window.onresize=findDimensions;

	var _checkedAccount = new Array();
	var _baseData=[];
	var _data=[];
	$(function() {
		resize();
		/* 加载菜单信息 */
		var setting = {
				callback: {
					onClick: zTreeOnClick
				},
				view: {
					addHoverDom:addHoverDom,
					removeHoverDom: removeHoverDom,
					showIcon: false
				},
				data : {
					simpleData : {
						enable : true
					},
					showTitle : true, //是否显示节点title信息提示 默认为true
					key : {
						title : "title" //设置title提示信息对应的属性名称 也就是节点相关的某个属性
					}
				}
		};
		$.ajax({
			type : "Post",
			url : '${ctx}/bill/getAccountTree2',
			dataType : "json",
			success : function(result) {
				_baseData = result.data;
				_data = _baseData;
				$.fn.zTree.init($("#treeDemo"), setting, _data);
				fuzzySearch('treeDemo','#searchAccount',null,true); //初始化模糊搜索方法
			},
			error : function() {
				//alert("菜单加载失败！")
			}
		});
		
		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_a");
			if (treeNode.pId!='pid_0' || $("#editBtn_"+treeNode.tId).length>0 || $("#delBtn_"+treeNode.tId).length>0) return;
			var addStr = "<span class='button edit' id='editBtn_" + treeNode.tId
				+ "' title='编辑' onfocus='this.blur();'></span><span class='button remove' id='delBtn_" + treeNode.tId
				+ "' title='删除' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#editBtn_"+treeNode.tId);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				var nodes = zTree.getNodesByParam("pId",treeNode.id);
				let cardNumbers = '';
				if(nodes!=null && nodes.length>0){
					for(var i=0;i<nodes.length;i++){
						cardNumbers += nodes[i].name + ',';
					}
					if(cardNumbers.length>0){
						cardNumbers = cardNumbers.substring(0, cardNumbers.lastIndexOf(','));
					}
				}
				_accBodyEdit(treeNode.name,cardNumbers);
				return false;
			});
			var btn2 = $("#delBtn_"+treeNode.tId);
			if (btn2) btn2.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				var nodes = zTree.getNodesByParam("pId",treeNode.id);
				let cardNumbers = '';
				if(nodes!=null && nodes.length>0){
					for(var i=0;i<nodes.length;i++){
						cardNumbers += nodes[i].name + ',';
					}
					if(cardNumbers.length>0){
						cardNumbers = cardNumbers.substring(0, cardNumbers.lastIndexOf(','));
					}
				}
				_accBodyDel(treeNode.name,cardNumbers);
				return false;
			});
		};

		function removeHoverDom(treeId, treeNode) {
			$("#editBtn_"+treeNode.tId).unbind().remove();
			$("#delBtn_"+treeNode.tId).unbind().remove();
		};
		function zTreeOnClick(event, treeId, treeNode) {
			 _checkedAccount = new Array();
			 if(treeNode.level == 2){
				 if(treeNode.name){
					 _checkedAccount.push(treeNode.name);
				 }
			 }
			 try{
				if(_checkedCallback){
					_checkedCallback();
				}
			}catch(e){
				
			}
		};
		
		$(window).resize(function() {
			resize();
		});

		//给多选按钮绑定事件
		$("#open_multi").change(function(e) {
			if (e.target.checked){
				setting.check.chkStyle="checkbox"
				$.fn.zTree.init($("#treeDemo"), setting, _data);
			}else{
				setting.check.chkStyle="radio"
				$.fn.zTree.init($("#treeDemo"), setting, _data);
			}
			_checkedAccount = new Array();
		});
	});
	
	function resize(){
		var clientHeight=document.body.clientHeight;
		console.log(clientHeight);
		$(".account_treeview").css("height",(clientHeight-210)+"px");
		var clientWidth=document.body.clientWidth;
		$(".bill-right").css("width",(clientWidth-300)+"px");
	};


</script>
<style>
	li{
		position: relative;
	}
	span._nodeTextClass {
		display: inline-block;
		width: 137px;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-right: 10px;
	}
	.treeview span.icon{
		font-size: 13px;
		color: #A3A3A3;
	}
	#edit_b {
		font-size: 16px;
		padding-left: 55px;
		color: #A3A3A3;
		position: absolute;
		top: 8px;
		right: 29px;
	}
	#edit_s {
		font-size: 22px;
		padding-left: 6px;
		position: absolute;
		top: 4px;
		right: 4px;
		color: #A3A3A3;
	}
	.form-control:focus{
		border-color: #4595ec;
	}
	.content{
		background-color: #eef3f7;
	}
	.account_treeview.fl {
		margin-top: 26px;
		position: fixed;
		z-index: 2;
		padding-bottom: 30px;
	}
	.fl{
		float:left;
	}
	.ml10{
		margin-left:10px;
	}
	.account_treeview{
		width:240px;
		background-color: #fff;
		height:400px;
		overflow: hidden;
	}
	.account_treeview_scroll{
		overflow-y: scroll;
		margin-top: 37px;
	}
	.account_treeview_buttonarea{
		width:240px;
		height: 65px;
		display: block;
		padding: 10px;
		position: fixed;
		top: 100px;
		z-index: 1;
		background-color: white;
		margin-top: 40px;
	}
	/*.list-group{*/
	/*margin-top: 40px;*/
	/*}*/
	.account_treeview_buttonarea input{
		margin-top: 10px;
		border-radius:4px;
	}
	.account_treeview_buttonarea i{
		height: 24px;
		width:24px;
		background-image: url(${ctx}/imgs/search.png);
		display: block;
		position: absolute;
		top: 25px;
		z-index: 99;
		right: 18px;
		cursor: pointer;
	}
	.bg_gray{
		background-color: #edf3f7;
	}
	.box{
		padding:0 15px 10px 15px;
		margin-left: 240px;
	}
	.box-nav{
		font-size: 16px;
		font-family: 微软雅黑;
		color:#9a9899;
		margin-bottom:10px;
	}
	.box-header{
		background-color: #fff;
		color:#6f7689;
		padding-top:0px;
	}
	.box-header .form-group{
		margin-top:10px;
	}
	.box-body{
		background-color: #fff;
		margin-top: 20px;
		min-height:400px;
	}
	.bill-right{
		float: left;
		margin-left:20px;
	}
	.bill-buttonarea .btn{
		height:32px;
		width:80px;
		margin-right:20px;
		font-size:14px;
	}
	.list-group-item{
		border:none;
	}
	.node-treeview-checkable{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.glyphicon-unchecked:before{
		content:"";
		background: url('${ctx}/imgs/unchecked.png') no-repeat top left;
		height: 16px;
		width: 16px;
		position: absolute;
		top: -18px;
	}
	.glyphicon-triangle-right:before {
		content: "\e250";
		position: absolute;
		top: -16px;
	}
	.glyphicon-triangle-bottom:before {
		content: "\e252";
		position: absolute;
		top: -16px;
	}
	.glyphicon-check:before{
		content:"";
		background: url('${ctx}/imgs/checked.png') no-repeat top left;
		height: 16px;
		width: 16px;
		position: absolute;
		top: -18px;
	}
	.glyphicon-chevron-right:before{
		content:"";
		background: url('${ctx}/imgs/right.png') no-repeat top left;
		height: 16px;
		width: 16px;
		position: absolute;
		top: -15px;
	}
	.glyphicon-chevron-down:before{
		content:"";
		background: url('${ctx}/imgs/down.png') no-repeat top left;
		height: 16px;
		width: 16px;
		position: absolute;
		top: -15px;
	}
	.stream_search{
		background: #fff;
		margin: 0 0 30px 0;
		padding-top:25px;
	}
	.stream_body{
		background: #fff;
	}
	.stream_body .title{
		font-size: 14px;
		font-weight:800;
	}
	.ztree *{
		font-size: 14px;
	}
	.ztree li,
	.ztree li a{
		margin-bottom: 5px;
	}
</style>
